<template>
    <div class="game">
      <img class="close" src="../assets/img/butuisong@2x.png" @click.stop.self="close(momentType, momentId)"/>
        <img class="label" src="../assets/img/bendibisai@2x.png" alt=""/>
        <a :href="Props.GAME_ID | gameDetailFilter">
          <div class="game_con">
             <p class="title">{{ Props.GAME_NAME }}</p>
             <p class="sign-time"><img class='icon' src="../assets/img/time@2x.png" alt="" />报名时间：{{Props.JOIN_START_TIME}} - {{Props.JOIN_END_TIME}}</p>
             <p class='start-time'><img class='icon' src="../assets/img/camp@2x.png" alt="" />比赛时间：{{Props.GAME_START_TIME}} - {{Props.GAME_END_TIME}}</p>
             <img class="signnow" src="../assets/img/baominghot@2x.png" alt=""/>
          </div>
        </a>
        <slot></slot>
      </div>
</template>

<script>
import BottomBar from './common/BottomBar'
import MomentMixin from './MomentMixin'
import { gameDetailFilter } from '../filters/userFilter'

export default {
  name: 'localGame',
  props: {
    Props: Object
  },
  filters: {
    gameDetailFilter
  },
  mixins: [MomentMixin],
  components: {
    BottomBar
  },
  methods: {
  }
}

</script>

<style lang="less" scoped>
@import "./common/mixins.less";

  .game {
    .moment;
    position: relative;
  }
  .game_con {
    height: 120px;
    padding-top: 23px;
    img.icon {
      width: 12px;
      height: 12px;
      margin-top: -3px;
      margin-right: 3px;
    }
  }
  .title {
    text-align: center;
    background-color: #FFE8F0;
    border-radius: 99px;
    padding: 5px 11px;
    display: inline-block;
    color: #7C2628;

    @media screen {
      @media (max-width: 325px) {
        font-size: 14px;/*no*/
      }
      @media (min-width: 325px) {
        font-size: 16px;/*no*/
      }
    }
  }

  .sign-time,.start-time {
    text-align: center;
    margin: 0;
    margin-top: 6px;
    color: #777;

    @media screen {
      @media (max-width: 400px) {
        font-size: 12px;/*no*/
        line-height: 14px;/*no*/
      }
      @media (min-width: 400px) {
        font-size: 14px;/*no*/
        line-height: 16px;/*no*/
      }
    }
  }
  .label {
    position: absolute;
    left: -2px;
    top: 5px;
    width: 27px;
    height: 118px;
  }
  .close {
    position:absolute;
    right: 4px;
    top: 0px;
    width: 34px;
    height: 24px;
  }
  .signnow {
    width: 107px;
    height: 38px;
  }
</style>
